<template>
  <div class="commentWrapper">
    <div class="top">
      <img src="http://static.52letsgo.cn/zz/wechatimg/bg_comment.png" alt="">
      <div class="content">
        <p class="orderNo"><span class="left">订单号:</span><span class="right">{{orderInfo.orderNo}}</span></p>
        <p class="orderTime"><span class="left">订餐时间:</span><span class="right">{{orderInfo.orderTime}}</span></p>
      </div>
      <img src="http://static.52letsgo.cn/zz/wechatimg/bg_comment_down.png" alt="">
    </div>
    <div style="height: 1rem;"></div>
    <div class="middleComment">
       <div class="deliciousBox">
         <span class="title">早餐美味</span>
         <rater :value.sync="deliciousData" slot="value" star="☻" active-color="#FF9900" :margin="4"></rater>
         <span class="score">{{deliciousData}}分</span>
       </div>
       <div class="serviceBox">
         <span class="title">送餐服务</span>
          <rater :value.sync="serviceData" slot="value" star="☻" active-color="#FF9900" :margin="4"></rater>
          <span class="score">{{serviceData}}分</span>
       </div>
     </div>
     <div class="bottom-commit-box">
       <group title="您想说点什么">
         <x-textarea :max="200" :value.sync="commentValue" placeholder="请输入您的评价" :rows="8"></x-textarea>
       </group>
     </div>
     <div class="submit-btn">
       <x-button type="warn" show-loading action-type="button" @click="submitComment">提交</x-button>
     </div>
  </div>
</template>
<script>
  import { Rater, Group, Cell, XTextarea, XButton } from './../../components'
  import { orderInfo } from './../../vuex/getters.js'
  import { set_orderInfo } from './../../vuex/actions.js'
  
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  export default {
    components: {
      Rater,
      Group,
      Cell,
      XTextarea,
      XButton
    },
    data () {
      return {
        deliciousData: 5,
        serviceData: 5,
        commentValue: '',
        userInfo: LocalStorageUtil.getItem("User")
      }
    },
    vuex: {
      getters: {
        orderInfo
      },
      actions: {
        set_orderInfo
      }
    },
    created: function () {
      Global.closeLoading()
    },
    methods: {
      submitComment () {
        if(!this.commentValue) {
          Global.showToast('请输入评价', this)
          return;
        }
        var data = {
          action:"comment",
          orderId: this.orderInfo.id,
          content: this.commentValue,
          accountId: this.userInfo.id,
          tasteScore: this.deliciousData,
          speedScore: this.serviceData
        }
        MyRequest.MyGetWithToast("Comment", this, function (result, that) {
          console.log(result)
          if(result.success) {
            Global.showToast('评价成功', that)
            history.go(-1)
          } else {
            Global.showToast('评价失败', that)
          }
        }, data)
      }
    }
}
</script>
<style lang="less">
@import './comment.less';
</style>